import React, { useEffect } from 'react';
import { useTemplateContext } from '@/contexts/TemplateContext';

const ParameterInputPanel: React.FC = () => {
  const { selectedTemplate, templateParams, updateTemplateParam } = useTemplateContext();
  
  // 当模板参数变化时更新文档
  useEffect(() => {
    // 当模板变化时自动滚动到顶部
    if (inputContainerRef.current) {
      inputContainerRef.current.scrollTop = 0;
    }
  }, [selectedTemplate]);
  
  const inputContainerRef = React.useRef<HTMLDivElement>(null);
  
  if (!selectedTemplate) {
    return (
      <div className="bg-white rounded-lg shadow-md p-6 mb-6">
        <h3 className="text-lg font-semibold mb-4 text-gray-800">2. 填写文书参数</h3>
        <p className="text-gray-500">请先选择一个模板</p>
      </div>
    );
  }
  
  return (
    <div className="bg-white rounded-lg shadow-md p-6 mb-6">
      <h3 className="text-lg font-semibold mb-4 text-gray-800">2. 填写文书参数</h3>
       <div ref={inputContainerRef} className="space-y-4 max-h-60 overflow-y-auto pr-2">
        {selectedTemplate.params.map(param => (
          <div key={param.name} className="flex flex-col">
            <label 
              htmlFor={param.name} 
              className="text-sm font-medium text-gray-700 mb-1"
            >
              {param.label}:
            </label>
            <input
              type={param.type}
              id={param.name}
              value={templateParams[param.name] || ''}
              onChange={(e) => updateTemplateParam(param.name, e.target.value)}
              className="p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default ParameterInputPanel;